<template>
  <div class="devicePage">
    <el-select class="deviceSelect" v-model="device.deviceType" @change="getData(device.deviceType)" placeholder="请选择">
      <el-option
        v-for="item in tableData"
        :key="item.deviceType"
        :label="item.deviceName"
        :value="item.deviceType">
      </el-option>
    </el-select>
    <div class="back" @click="back()">
      <i class="el-icon-back"></i>返回
    </div>
    <div class="deviceList">
      <div class="deviceName" v-for="item in deviceData" :key="item.index">
        <div class="name">{{ item.name }}</div>
        <div class="num">{{ item.num }}</div>
      </div>
    </div>
    <div class="deviceEcharts">
      <div class="deviceTit">
        <el-select class="deviceSelect" @change="changeDeviceTag()" v-model="deviceNameTag" placeholder="请选择">
          <el-option
            :label="'全部'"
            :value="'全部'">
          </el-option>
          <el-option
            v-for="item in echartsData.series"
            :key="item.name"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
        <div class="titName">
          {{ device.deviceName }}
        </div>
        <div class="operation">
          <el-radio-group v-model="dataType" @change="changeDate(1)">
            <el-radio-button label="1">近3天</el-radio-button>
            <el-radio-button label="2">近7天</el-radio-button>
            <el-radio-button label="3">近30天</el-radio-button>
            <el-radio-button label="4">自定义</el-radio-button>
          </el-radio-group>
          <el-date-picker
            v-show="dataType === '4'"
            v-model="date"
            type="daterange"
            range-separator="至"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate(4)"
          >
          </el-date-picker>
        </div>
      </div>
      <charts v-if="chartsShow" :deviceType="deviceType" ref="chartsData" ></charts>
    </div>
  </div>
</template>

<script>
import charts from './componets/charts.vue'
import {
  getDeviceApi,
  getWeatherDeviceApi,
  getSoilDeviceApi
} from '@/api/device'
export default {
  name: 'SevencolorUserIndex',
  components: {
    charts
  },

  data () {
    return {
      tableData: [
        { deviceName: '土壤监测仪', deviceId: 'A1102', deviceType: '1', deviceState: '在线' },
        { deviceName: '气象检测仪', deviceId: 'A1103', deviceType: '2', deviceState: '在线' },
        { deviceName: '长势监测仪', deviceId: 'A1103', deviceType: '3', deviceState: '在线' },
        { deviceName: '视频监控', deviceId: 'A1103', deviceType: '4', deviceState: '在线' }
      ],
      deviceNameTag: '全部',
      dataType: '1',
      params: {
        startTime: '',
        endTime: ''
      },
      date: '',
      device: '',
      chartsShow: false,
      deviceType: 0, // 类型
      echartsData: {},
      deviceData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },

  mounted () {
    this.device = this.$route.query
    this.changeDate()
  },

  methods: {
    changeDeviceTag () {
      const series = this.echartsData.series.filter(item => {
        return this.deviceNameTag === '全部' ? true : item.name === this.deviceNameTag
      })
      this.$refs.chartsData.getDataList({
        categories: this.echartsData.categories,
        series: series
      })
    },
    changeDate () {
      if (this.dataType === '1') {
        this.date = [this.$moment().subtract(2, 'days').format('YYYY-MM-DD 23:59:59'), this.$moment().format('YYYY-MM-DD 00:00:00')]
      }
      if (this.dataType === '2') {
        this.date = [this.$moment().subtract(6, 'days').format('YYYY-MM-DD 23:59:59'), this.$moment().format('YYYY-MM-DD 00:00:00')]
      }
      if (this.dataType === '3') {
        this.date = [this.$moment().subtract(29, 'days').format('YYYY-MM-DD 23:59:59'), this.$moment().format('YYYY-MM-DD 00:00:00')]
      }
      if (!this.date) {
        return
      }
      this.params.startTime = this.$moment(this.date[0]).format('YYYY-MM-DD 00:00:00')
      this.params.endTime = this.$moment(this.date[1]).format('YYYY-MM-DD 23:59:59')
      this.chartsShow = false
      this.getData(this.device.deviceType)
    },
    async getData (type) {
      this.deviceType = type
      this.tableData.map(async item => {
        if (this.deviceType === item.deviceType) {
          this.device.deviceName = item.deviceName
        }
      })
      if (type === '1') {
        await this.getSoilDevice(this.params)
        this.chartsShow = true
        this.$nextTick(() => {
          this.$refs.chartsData.getDataList(this.echartsData)
        })
        this.deviceData = [
          { name: '温度', num: '24.9' },
          { name: '湿度', num: '9.2' },
          { name: '电导率', num: '62' }
        ]
      } else if (type === '2') {
        await this.getWeatherDevice(this.params)
        this.chartsShow = true
        this.$nextTick(() => {
          this.$refs.chartsData.getDataList(this.echartsData)
        })
        this.deviceData = [
          { name: '温度', num: '23.10' },
          { name: '湿度', num: '56.40' }
        ]
      } else if (type === '4') {
        await this.getDeviceList(this.params)
        this.chartsShow = true
        this.$nextTick(() => {
          this.$refs.chartsData.getDataList(this.echartsData)
        })
      }
    },
    // 长势
    async getDeviceList (params) {
      const res = await getDeviceApi(params)
      console.log(res)
      this.echartsData = res.data
    },
    // 气象
    async getWeatherDevice (params) {
      const res = await getWeatherDeviceApi(params)
      this.echartsData = res.data
    },
    // 土壤
    async getSoilDevice (params) {
      const res = await getSoilDeviceApi(params)
      this.echartsData = res.data
    },
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriMonitoring'
      })
    }
  }
}
</script>
<style scoped lang="scss">
.back {
  font-size: 1.1542vw;
  margin-bottom: 1.5625vw * 0.834;
  width: 5.2083vw;
  cursor: pointer;
}
.deviceList {
  width: 80.2083vw;
  height: 7.2917vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  margin-bottom: 1.0417vw * 0.834;
  display: flex;
  justify-content: space-around;
  align-content: center;
  padding: 0 2.0833vw;
  .deviceName {
    margin: auto 0;
    .name {
      font-weight: 600;
      font-size: 28px;
      color: #333333;
      text-align: center;
      margin-bottom: 10px;
    }
    .num {
      font-weight: 400;
      font-size: 20px;
      color: #666666;
      text-align: center;
    }
  }
}
.deviceEcharts {
  width: 80.2083vw;
  height: 36.6146vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  .deviceTit {
    width: 80.2083vw;
    height: 4.1667vw * 0.834;
    background: rgba(14, 52, 39, 0.1);
    border-radius: 20px 20px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2.0833vw;
    margin-bottom: 0.5208vw;
    position: relative;
    .titName {
      font-weight: 600;
      font-size: 28px;
      color: #0e3427;
    }
    ::v-deep .deviceSelect {
      position: absolute;
      width: 1.8rem;
      left: 70.8vw;
      top: 1rem;
      z-index: 100;
      .el-input__inner {
        background: #EDF1F4
      }
    }
  }
}
::v-deep .operation {
  display: flex;
  align-items: center;
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #19B560;
    background-color: #fff;
    border-color: #19B560;
  }
  .el-radio-group {
    margin-right: 0.1rem
  }
}
::v-deep .deviceSelect {
  position: absolute;
  left: 2.8rem;
  top: 0.1rem;
  width: 2.6rem;
  .el-input__inner {
    height: 35px;
    line-height: 35px
  }
  .el-input__icon {
    line-height: 35px
  }
}
</style>
